"use client"
import {RiLightbulbLine} from "react-icons/ri";
import {HiMoon, HiSun} from "react-icons/hi";
import {TbLetterA} from "react-icons/tb";
import {useTheme} from "next-themes";
import {clsx} from "clsx";

export default function ThemeSwitch() {
    const {theme,setTheme} = useTheme()
    return (
        <>
            <div className={"rounded-md bg-amber-red flex justify-center items-center gap-x-2"}>
                <div className={clsx(theme === 'system' && 'text-white' ,"h-[38px] w-[38px] flex items-center justify-center hover:text-gray-800 transition-all cursor-pointer")} onClick={()=>setTheme('system')}>
                    <TbLetterA/>
                </div>
                <div className={clsx(theme === 'light' && 'text-white' ,"h-[38px] w-[38px] flex items-center justify-center hover:text-gray-800 transition-all cursor-pointer")} onClick={()=>setTheme('light')}>
                    <HiSun/>
                </div>
                <div className={clsx(theme === 'dark' && 'text-white' ,"h-[38px] w-[38px] flex items-center justify-center hover:text-gray-800 transition-all cursor-pointer")} onClick={()=>setTheme('dark')}>
                    <HiMoon/>
                </div>
            </div>
        </>
    )
}